<template>
    <div class="article-container">
        <van-nav-bar
        class="app-nav-bar"
        title="文章详情"
        right-text="按钮"
        >
        <div slot="left">
            <van-icon size="25" @click="$router.back()" name="arrow-left" />
        </div>
        <div slot="right">
            <van-icon size="25" name="ellipsis" />
        </div>
        </van-nav-bar>
        <van-cell class="article-header" center v-show="isShowHeader">
            <div slot="icon">
                <van-image
                    :src="articleInfo.aut_photo"
                    round
                />
            </div>
            <div slot="title">
                <span class="name">{{ articleInfo.aut_name }}  |</span>
                <span class="follower" v-if="!articleInfo.is_followed" @click="onFollows">关注</span>
                <span class="followered" v-else @click="onFollows">已关注</span>
            </div>
        </van-cell>
        <van-skeleton title style="margin-top:15px" :row="20" v-show="isLoading"  />
        <div class="article"  v-show="!isLoading" @scroll="scrollEvent" ref="article">
        <!-- 文章信息 -->
        <div class="article-info" ref="article-info">
            <h2 class="article-title">{{ articleInfo.title }}</h2>
            <div class="user-info">
                <div class="article-redinfo">
                    <span>{{ articleInfo.pubdate }} |</span>
                    <span>4118 阅读 |</span>
                    <span>{{ articleInfo.comm_count }} 评论</span>
                </div>
                <div class="user-articleinfo">
                    <van-cell border :title="articleInfo.aut_name" center >
                        <div slot="icon">
                            <van-image
                            class="user-photo"
                            round
                            fit="cover"
                            :src="articleInfo.aut_photo"
                            />
                        </div>
                        <div slot="default">
                            <van-button 
                            v-if="!articleInfo.is_followed"
                            round 
                            @click="onFollows()"
                            icon="plus" 
                            size="small" 
                            type="info">关注</van-button>
                             <van-button 
                             v-else
                            round 
                            @click="onFollows()" 
                            size="small" 
                            color="#FC6613"
                            type="info">已关注</van-button>
                        </div>
                    </van-cell>
                </div>
            </div>
        </div>
        <!-- 文章详情 -->
        <div ref="article-content" class="article-content markdown-body" v-html="articleInfo.content">

        </div>
        <div class="articlePudate">
            <span>文章发布时间：</span>
            <span>{{ articleInfo.pubdate }}</span>
        </div>
        <div class="space"></div>
        <!-- 评论列表 -->
        <comment-list ref="comment" :articleInfo="articleInfo"></comment-list>
         <!-- 评论列表 -->
        <!-- 底部菜单 -->
        <article-bottom @scrollToComment="scrollComment" @reloadArticle='reloadArticle' :articleInfo ="articleInfo"></article-bottom>
        <!-- 底部菜单 -->
        </div>
    </div>
</template>

<script>
import ArticleBottom from '@/views/article/components/articleBottom'
import CommentList from '@/views/article/components/commentList'
import { getArticleDetail }  from '@/api/article'
import { addFollows,deleteFollows } from '@/api/user'
import { ImagePreview } from 'vant';
import './css/markdown.css'
export default {
    name: 'ArticleIndex',
    components :{
      ArticleBottom,
      CommentList
    },
    data() {
        return {
            articleInfo: {},
            isLoading: true,
            isShowHeader: false,
            headHeight:0
        }
    },
    created() {
        this.loadArticleDeatil(this.$route.params.articleId)
    },
    mounted() {
        this.handlePreviewImage()
    },
    methods: {
        async loadArticleDeatil (articleId) {
            const { data:{ data } } = await getArticleDetail(articleId)
            this.isLoading = false
            this.articleInfo = data
            this.$nextTick(() => {
            this.headHeight = this.$refs['article-info'].clientHeight
        })
            this.handlePreviewImage()
        },
        //处理图片预览
        async handlePreviewImage () {
            const articleContent = this.$refs['article-content']
            if(articleContent) {
                await this.$nextTick( () =>{
                const imgs = articleContent.querySelectorAll('img')
                console.log(imgs)
                let previewImage = []
                imgs.forEach((img,index) =>{
                    previewImage.push(img.src)
                    img.onclick = function () {
                        ImagePreview({
                        images:previewImage,
                        startPosition: index,
                        closeable: true
                        });
                    }
                })
                console.log(previewImage);
              })
            }
        },

       async onFollows () {
            if (!this.articleInfo.is_followed){
                // 去关注用户
                const follows = await addFollows(this.articleInfo.aut_id)
                follows ? this.$toast.success('已关注') && (this.articleInfo.is_followed = true) : this.$toast.fail(follows)
            }else {
                // 去取消关注用户
                const follows = await deleteFollows(this.articleInfo.aut_id)
                this.articleInfo.is_followed = false
                follows ? this.$toast.success('已取消关注') : this.$toast.success('取消关注失败')
            }
        },
        reloadArticle () {
            console.log("212121");
        },
        // 滚动到评论区
        scrollToComment () {
            this.$refs.comment.$el.scrollIntoView({
                behavior: "smooth"
            })
        },
        scrollComment() {
            this.scrollToComment()
        },
        scrollEvent (){
            let articleScroll = this.$refs['article']
            this.isShowHeader = articleScroll.scrollTop > this.headHeight
        }
    },
};
</script>

<style lang="less" scoped>
.article-container{
    height: 100%;
    /deep/.van-icon{
        color: #fff;
    }
    .article-header{
        z-index: 1;
        .van-image{
            height: 40px;
            width: 40px;
        }
        .name{
            margin-left: 10px;
            font-size: 15px;
        }
        .follower{
            margin-left: 10px;
            font-size: 15px;
            color: #fc6627;
        }
        .followered{
            margin-left: 10px;
            font-size: 15px;
        }


    }
    .article{
        position: fixed;
        right: 0;
        bottom: 58px;
        left: 0;
        top: 48px;
        overflow-y: auto;
        .article-info{
            padding: 10px;
            .article-title{
                font-size: .58667rem;
                line-height: .8rem;
                font-weight: 400;
                word-break: break-all;
                margin: unset;
            }
            .user-info{
                    .article-redinfo{
                        padding-top: .32rem;
                        color: #a5a6ab;
                        display: flex;
                        font-size: .26667rem;
                        span:nth-child(n+2){
                            margin-left: 5px;
                        }
                    }
                    .user-articleinfo{
                        // border-bottom: 1px solid #ebedf0;
                        .user-photo{
                            display: flex;
                            width: 35px;
                            height: 35px;
                        }
                        /deep/.van-cell__title{
                            margin-left: 10px;
                        }
                    }
                }
        }
    }
    .article::-webkit-scrollbar { width: 0 !important }
        
        .article-content{
            padding: 10px;
        }
        .articlePudate{
            display: flex;
            justify-content: flex-end;
            // text-align: right;
            font-size: .32rem;
            color: #a5a6ab;
            padding-top: .66667rem;
            padding-right: 20px;
            padding-bottom: 20px;
        }
        .space{
            height: .32rem;
            background: #f7f8fa;
        }
}
</style>